<template>
	<view class="content">
		<view class="bannerTop">
			<image style="width: 100%;height: 376upx" mode="widthFix" src="https://www.linqinghu.cn/ruixiang/static/img/index/indexBanner.jpg"></image>
			<view class="head-serch-box flex-row flex-y-center">
				<view @tap="toggleShowSelect" class="select-box flex-grow-0 flex-x-center flex-y-center">
					{{selectList[selectedIndex]}}
					<image mode="widthFix" style="width:20upx;height=10upx;margin-left: 20upx" src="/static/icon-sort-down.png" />
					<view v-if="hidden" class="selectlist">
						<block v-for="(item,index) in selectList" :key="index">
							<view @tap.stop="selectClick(index)" :class="index == selectedIndex ? 'active' : ''">{{item}}</view>
						</block>
					</view>
				</view>
				<view class="flex-grow-1 flex-y-center" @tap="toSearch">
					<image mode="widthFix" style="width: 30upx;margin-left: 30upx;margin-right:10upx;" src="/static/icon-search.png" />
					请输入小区关键字
				</view>
			</view>
		</view>

		<view class="moduleBox flex-list">
			<block v-for="(item,index) in tenModule" :key="index">
				<view @tap="toHouseList(item.toUrl)" class="nodule_item flex-grow-0 flex-y-center flex-x-center flex-col">
					<image mode="widthFix" style="width:95upx;height: 95upx" :src="item.icon"></image>
					<view>{{item.title}}</view>
				</view>
			</block>
		</view>

		<view>
			<swiper style="height: 260upx" indicator-active-color="red" indicator-dots="true" autoplay="true" interval="2000"
			 duration="500" circular="true">
				<block v-for="(item,index) in bannerList" :key="index">
					<swiper-item>
						<image :src="item" class="slide-image" style="width: 100%" mode="widthFix"></image>
					</swiper-item>
				</block>
			</swiper>
		</view>

		<view class="list-title flex-row flex-y-center">
			<view class="flex-grow-1">
				<view class="flex-grow-0 left-title flex-y-center">
					<view class="shuxing"></view>
					推荐二手房
				</view>

			</view>
			<view class="flex-grow-1 flex-y-center right-title flex-right">
				<view class="flex-grow-0 flex-y-center" @tap="toMore">
					更多
					<image mode="widthFix" style="width: 16upx;margin-left: 6upx" src="/static/icon-jiantou-r.png"></image>
				</view>
			</view>
		</view>

		<house-list @toDetails="toDetails" :item="item" v-for="(item,index) in houseList" :key="index"></house-list>
		<!-- <button @tap="toweex" type="primary" size="mini">totestweex</button> -->
	</view>
</template>

<script>
	import {
		URI_GETSMALLHOUSELIST
	} from "../../utils/api";
	import HouseList from '../../components/HouseList'
	let cdn = 'https://www.linqinghu.cn/ruixiang';
	export default {
		components: {
			HouseList
		},
		data() {
			return {
				selectList: ['二手房', '租房', '新房'],
				selectedIndex: 0,
				hidden: false,
				tenModule: [{
						icon: cdn + '/static/img/index/index01.png',
						title: '二手房',
						toUrl: '/pages/houseList/houseList?label=0'
					},
					{
						icon: cdn + '/static/img/index/index02.png',
						title: '租房',
						toUrl: '/pages/houseList/houseList?label=1'
					},
					{
						icon: cdn + '/static/img/index/index07.png',
						title: '新楼盘',
						toUrl: '/pages/houseList/houseList?label=2'
					},
					{
						icon: cdn + '/static/img/index/index08.png',
						title: '贷款计算',
						toUrl: "/pages/webView/webView"
					},
				],
				bannerList: [
					cdn + '/static/img/index/ad1.jpg', cdn + '/static/img/index/ad2.png', cdn + '/static/img/index/ad3.jpg'
				],
				houseList: []
			};
		},
		onLoad: function() {
			uni.startPullDownRefresh();
			this.getHouselist()
		},
		onPullDownRefresh() {

			this.getHouselist()
		},
		methods: {
			getHouselist() {
				this.$ajax.get(URI_GETSMALLHOUSELIST, {
					type: 1
				}).then((res) => {
					this.houseList = res.data;
					uni.stopPullDownRefresh()
				}).catch((error) => {
					uni.stopPullDownRefresh()
				})
			},
			toggleShowSelect() {
				this.hidden = !this.hidden;
			},
			selectClick(index) {
				this.selectedIndex = index;
				this.hidden = false
			},
			toHouseList(url) {
				uni.navigateTo({
					url: url
				})
			},
			toSearch() {
				uni.navigateTo({
					url: "/pages/search/search?label=" + this.selectedIndex
				})
			},
			toDetails(id, title) {
				uni.navigateTo({
					url: "/pages/houseDetail/houseDetail?id=" + id + "&title=" + title
				})
			},
			toMore() {
				uni.navigateTo({
					url: '/pages/houseList/houseList?label=0'
				})
			},
			toweex() {
				console.log(12);
				uni.navigateTo({
					url: '/pages/test/test'
				})
			}
		}
	}
</script>

<style scoped>
	.bannerTop {
		position: relative;
	}

	.head-serch-box {
		position: absolute;
		bottom: 40upx;
		width: 622upx;
		height: 64upx;
		background: rgba(255, 255, 255, .9);
		border: 1px solid #ddd;
		border-radius: 4px;
		left: 50%;
		font-size: 28upx;
		transform: translateX(-50%);
		color: #777;
		z-index: 99;
	}

	.select-box {
		width: 84px;
		height: 100%;
		border-right: 1px solid #ddd;
		color: #333;
		position: relative;
	}

	.selectlist {
		width: 100%;
		position: absolute;
		left: 0;
		top: 80upx;
		text-align: center;
		border: 1px solid #eee;
		background-color: #fff;
		border-radius: 4px;
		line-height: 48upx;
		padding: 10upx 0;
		z-index: 100;
	}

	.selectlist .active {
		color: red;
	}

	.moduleBox {
		font-size: 26upx;
		padding: 30upx 40upx 10upx;
		margin-top: 5upx;
		margin-bottom: 15upx;
		color: #2c2c2c;
		background: #fff;
	}

	.moduleBox .nodule_item {
		width: 150upx;
		text-align: center;
		background: #fff;

	}

	.nodule_item:active {
		opacity: .8;
	}

	.moduleBox .nodule_item>view {
		margin-top: 10upx;
		margin-bottom: 20upx;
	}

	.list-title {
		height: 99upx;
		background: #fff;
		border-bottom: 1upx solid #eaeaea;
		border-top: 15upx solid #ececec;
		padding-left: 17upx;
		padding-right: 25upx;
	}

	.list-title .shuxing {
		display: inline-block;
		width: 8upx;
		height: 39upx;
		background: #3593e3;
		margin-right: 20upx;
	}

	.list-title .left-title {
		font-size: 30upx;
		font-weight: bold;
		color: #323232;
	}

	.list-title .right-title {
		font-size: 28upx;
		color: #6b6b6b;
	}
</style>
